<template>
  <div class="addressWrap">
     <mt-popup
      v-model="addressVisible"
      position="right"
      class="mintPop ">
      <ul>
        <li v-for="(item,index) in addressList" :key="item.id" :class="{active:item.isDefault==1}" @click="selectAddress(item)">
          <div class="addressImg"></div>
          <div class="selecImg"></div>
          <p class="first" v-text="addressDetail(item)">
          </p>
          <p class="last">
          <span>{{item.reciever}}</span>
          <span>{{item.mobile}}</span>
          </p>
        </li>
      </ul>
      <div class="addAddress" @click="addNewAddress">
        <p>配送至新地址</p>
      </div>
    </mt-popup>
     <new-address ref="newAddr"></new-address>
  </div>
</template>
<script>
import NewAddress from "@/components/newAddress/newAddress";
export default {
  data() {
    return {
      addressVisible: false,
      addressList: []
    };
  },
  created() {},
  methods: {
    show() {
      this.addressVisible = true;
      this.getAddressList();
    },
    hide() {
      this.addressVisible = false;
    },
    addNewAddress() {
      this.$refs.newAddr.show();
      this.hide();
    },
    selectAddress(item) {
      if(!item.isDefault){
         this.$axios
        .get(process.env.baseUrl + "/web-avicare-1.0/wx/ctmr/usraddr/setdefault/"+item.id)
        .then(res => {
         if(res.data.success){
          localStorage.setItem('address',JSON.stringify({"addressName":this.addressDetail(item),"addressCode":item.id}))
          this.$root.Bus.$emit("addressName",{"addressName":this.addressDetail(item),"addressCode":item.id})
          this.hide();
         }
        })
        .catch(error => {
          console.log(error);
        });
      }else{
        return
      }
     
    },
    getAddressList() {
      this.$axios
        .get(process.env.baseUrl + "/web-avicare-1.0/wx/ctmr/usraddr/list")
        .then(res => {
          this.addressList = res.data.list;
        })
        .catch(error => {
          console.log(error);
        });
    },
    addressDetail(item) {
      if (item.area) {
        return (
          item.province + item.city + item.district + item.area + item.address
        );
      } else {
        return item.province + item.city + item.district + item.address;
      }
    }
  },
  components: {
    NewAddress
  }
};
</script>
<style lang="less" scoped>
.addressWrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .mintPop {
    width: 6.5rem;
    height: 100%;
    ul {
      width: 100%;
      overflow-y: scroll;
      li {
        list-style: none;
        padding: 0.4rem 1.56rem 0.3rem 0.6rem;
        position: relative;
        border-bottom: 1px solid #eee;
        &:last-child {
          border: 0;
        }
        .addressImg {
          position: absolute;
          width: 0.26rem;
          height: 0.26rem;
          top: 0.5rem;
          left: 0.2rem;
          background: url(../../assets/images/address/address1.png) left
            no-repeat;
          background-size: 0.2rem 0.22rem;
        }
        .selecImg {
          position: absolute;
          width: 0.26rem;
          height: 0.26rem;
          top: 0.5rem;
          right: 0.4rem;
          background: url(../../assets/images/address/false.png) left no-repeat;
          background-size: 0.24rem 0.24rem;
        }
        .first {
          font-size: 0.28rem;
          line-height: 0.4rem;
          margin-bottom: 0.1rem;
        }
        .last {
          font-size: 0.28rem;
          line-height: 0.4rem;
          color: #4e4e4e;
        }
      }
      .active {
        color: #78bfff;
        .addressImg {
          background: url(../../assets/images/address/address.png) left
            no-repeat;
          background-size: 0.2rem 0.22rem;
        }
        .selecImg {
          background: url(../../assets/images/address/true.png) left no-repeat;
          background-size: 0.24rem 0.24rem;
        }
        .first {
          color: #78bfff;
        }
        .last {
          color: #78bfff;
        }
      }
    }
    .addAddress {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0.9rem;
      background-color: #78bfff;
      box-sizing: border-box;
      p {
        color: #fff;
        font-size: 0.36rem;
        line-height: 0.9rem;
        text-align: center;
        width: 100%;
      }
    }
  }
}
</style>
